import React from 'react';
import {
	Form,
	Field,
	Cell,
	Button,
	Toast,
	Switch,
	Checkbox,
	Radio,
	Stepper,
	Rate,
	Uploader,
	Picker,
	DatePicker,
	Popup,
} from '../..';
import useDemoTranslate from '../../../site/hooks/use-demo-translate';
import { Dictionary } from '../../utils/interface';
import { createBEM } from '../../utils/namespace';

import './basic.less';

const bem = createBEM('demo-form');

// TODO API 文档

const I18N: Dictionary<Dictionary<string>> = {
	'zh-CN': {
		basicUsage: '基础用法',
		validateRules: '校验规则',
		fieldType: '表单项类型',

		submit: '提交',
		username: '用户名',
		password: '密码',
		requireUsername: '请填写用户名',
		requirePassword: '请填写密码',

		label: '文本',
		message: '请输入6位数字',
		pattern: '正则校验',
		validator: '函数校验',
		validating: '验证中...',
		asyncValidator: '异步函数校验',

		rate: '评分',
		radio: '单选框',
		switch: '开关',
		slider: '滑块',
		picker: '选择器',
		stepper: '步进器',
		checkbox: '复选框',
		uploader: '文件上传',
		checkboxGroup: '复选框组',
		requireCheckbox: '请勾选复选框',
		pickerPlaceholder: '点击选择城市',
		timePickerLabel: '时间选择',
		timePickerPlaceholder: '点击选择时间',
		areaPicker: '地区选择',
		areaPickerPlaceholder: '点击选择省市区',
	},
	'en-US': {
		basicUsage: 'basicUsage',
		validateRules: 'validateRules',
		fieldType: 'Field Type',

		submit: 'Submit',
		username: 'Username',
		password: 'Password',
		requireUsername: 'Username is required',
		requirePassword: 'Password is required',

		label: 'label',
		message: 'please enter six number',
		pattern: 'Use pattern',
		validator: 'Use validator',
		validating: 'Validating...',
		asyncValidator: 'Use async validator',

		rate: 'Rate',
		radio: 'Radio',
		switch: 'Switch',
		slider: 'Slider',
		picker: 'Picker',
		stepper: 'Stepper',
		checkbox: 'Checkbox',
		uploader: 'Uploader',
		checkboxGroup: 'Checkbox Group',
		requireCheckbox: 'Checkbox is required',
		pickerPlaceholder: 'Select city',
		timePickerLabel: 'Datetime Picker',
		timePickerPlaceholder: 'Select time',
		areaPicker: 'Area Picker',
		areaPickerPlaceholder: 'select area',
	},
};

const I18N_DATA: Dictionary<Dictionary> = {
	'zh-CN': {
		pickerColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
		cascade: [
			{
				label: '中国',
				children: [
					{
						label: '北京',
						children: [{ label: '海淀区' }, { label: '朝阳区' }],
					},
					{
						label: '上海',
						children: [{ label: '闸北区' }, { label: '静安区' }],
					},
				],
			},
			{
				label: '美国',
				children: [
					{
						label: '纽约',
						children: [{ label: '曼哈顿' }, { label: '布鲁克林' }],
					},
					{
						label: '加利福尼亚',
						children: [{ label: '洛杉矶' }, { label: '旧金山' }],
					},
				],
			},
		],
	},
	'en-US': {
		pickerColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
		cascade: [
			{
				label: 'China',
				children: [
					{
						label: 'Beijing',
						children: [{ label: 'Haidian' }, { label: 'Chaoyang' }],
					},
					{
						label: 'Shanghai',
						children: [{ label: 'Zhabei' }, { label: 'Jingan' }],
					},
				],
			},
			{
				label: 'United State',
				children: [
					{
						label: 'New York',
						children: [
							{ label: 'Manhattan' },
							{ label: 'Brooklyn' },
						],
					},
					{
						label: 'California',
						children: [
							{ label: 'Los Angeles' },
							{ label: 'San Francisco' },
						],
					},
				],
			},
		],
	},
};

export default function Basic(): ReturnType<React.FC> {
	const [i18n] = useDemoTranslate(I18N, 'en-US');
	const [data] = useDemoTranslate(I18N_DATA, 'en-US');

	const pattern = /\d{6}/;

	return (
		<>
			<Cell.Group title={i18n.basicUsage}>
				<Form
					onFinish={(values) => console.log(values)}
					onFinishFailed={(values) => console.log(values)}
				>
					<Form.Item
						label={i18n.username}
						name="username"
						rules={[
							{
								required: true,
								message: i18n.requireUsername,
							},
						]}
					>
						<Field.Input />
					</Form.Item>
					<Form.Item
						label={i18n.password}
						name="password"
						rules={[
							{
								required: true,
								message: i18n.requirePassword,
							},
						]}
					>
						<Field.Input type="password" />
					</Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						block
						shape="round"
					>
						{i18n.submit}
					</Button>
				</Form>
			</Cell.Group>

			<Cell.Group title={i18n.validateRules}>
				<Form
					onFinish={(values) => console.log(values)}
					onFinishFailed={(values) => console.log(values)}
				>
					<Form.Item
						label={i18n.label}
						name="pattern"
						rules={[
							{
								pattern,
								message: i18n.message,
							},
						]}
					>
						<Field.Input placeholder={i18n.pattern} />
					</Form.Item>
					<Form.Item
						label={i18n.label}
						name="validator"
						rules={[
							{
								validator: (_, val) => {
									if (/\d{6}/.test(val)) {
										return Promise.resolve();
									} else {
										return Promise.reject(i18n.message);
									}
								},
							},
						]}
					>
						<Field.Input placeholder={i18n.validator} />
					</Form.Item>
					<Form.Item
						label={i18n.label}
						name="asyncValidator"
						rules={[
							{
								validator: (_, val) => {
									return new Promise((resolve, reject) => {
										Toast.show({
											message: i18n.validating,
											duration: 0,
										});

										setTimeout(() => {
											Toast.clear();
											/\d{6}/.test(val)
												? resolve(/\d{6}/.test(val))
												: reject(i18n.message);
										}, 1000);
									});
								},
							},
						]}
					>
						<Field.Input placeholder={i18n.asyncValidator} />
					</Form.Item>

					<Button
						type="primary"
						htmlType="submit"
						block
						shape="round"
					>
						{i18n.submit}
					</Button>
				</Form>
			</Cell.Group>

			<Cell.Group title={i18n.fieldType}>
				<Form
					onFinish={(values) => console.log(values)}
					onFinishFailed={(values) => console.log(values)}
					initialValues={{
						name: '123',
						switch: true,
						checkbox: true,
						checkboxGroup: ['1'],
						stepper: 1,
						rate: 3,
						uploader: [
							{
								url:
									'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
								status: 'done',
							},
						],
						timePicker: '14:00',
					}}
				>
					{/* <Form.Item label={i18n.switch} name="name">
						<Field.Input />
					</Form.Item> */}
					<Form.Item
						label={i18n.switch}
						name="switch"
						valuePropName="checked"
					>
						<Switch></Switch>
					</Form.Item>
					<Form.Item
						label={i18n.checkbox}
						name="checkbox"
						valuePropName="checked"
					>
						<Checkbox></Checkbox>
					</Form.Item>
					<Form.Item label={i18n.checkboxGroup} name="checkboxGroup">
						<Checkbox.Group direction="horizontal">
							<Checkbox value="1">{i18n.checkbox}1</Checkbox>
							<Checkbox value="2">{i18n.checkbox}2</Checkbox>
						</Checkbox.Group>
					</Form.Item>
					<Form.Item label={i18n.radio} name="radio">
						<Radio.Group direction="horizontal">
							<Radio value="1">{i18n.radio}1</Radio>
							<Radio value="2">{i18n.radio}2</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item label={i18n.stepper} name="stepper">
						<Stepper></Stepper>
					</Form.Item>
					<Form.Item label={i18n.rate} name="rate">
						<Rate count={6}></Rate>
					</Form.Item>
					<Form.Item label={i18n.uploader} name="uploader">
						<Uploader />
					</Form.Item>
					<Form.Item label={i18n.picker} name="picker">
						<Popup.Select
							select={<Picker data={data.pickerColumns} />}
						>
							{(value) => (
								<Field.Input
									value={value}
									placeholder={i18n.pickerPlaceholder}
								></Field.Input>
							)}
						</Popup.Select>
					</Form.Item>
					<Form.Item label={i18n.timePickerLabel} name="timePicker">
						<Popup.Select
							select={<DatePicker.TimePicker minHour={19} />}
						>
							{(value) => (
								<Field.Input
									value={value}
									placeholder={i18n.timePickerPlaceholder}
								></Field.Input>
							)}
						</Popup.Select>
					</Form.Item>
					<Form.Item label={i18n.areaPicker} name="areaPicker">
						<Popup.Select
							select={
								<Picker.Cascade
									data={data.cascade}
									cascadeSize={3}
									dataNames={{
										label: 'label',
										value: 'label',
										children: 'children',
									}}
								/>
							}
						>
							{(value) => {
								const inputValue = value && value.join('/');
								return (
									<Field.Input
										value={inputValue}
										placeholder={i18n.areaPickerPlaceholder}
									></Field.Input>
								);
							}}
						</Popup.Select>
					</Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						block
						shape="round"
					>
						{i18n.submit}
					</Button>
				</Form>
			</Cell.Group>
		</>
	);
}
